<!DOCTYPE html> 
<html> 
	<head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta id="viewport" name="viewport"
		content="width=auto; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<title>jqmdp demo page</title> 

	

	<link rel="stylesheet" href="../../docs.css" />
	<link rel="stylesheet" href="../../../js/jqm/jquery.mobile-1.0.css" />
	<script src="../../../js/jquery-1.6.4.js"></script>

	<script src="../../../js/jquery.mobile.jqmdp-1.0rc1.js"></script>
	<script src="../../../js/jqm/jquery.mobile-1.0.js"></script>

</head>

<body >
<!-- ======================================================================== -->
	<div data-role="page" id="index" >
		<div data-role="header" data-position="fixed" data-theme="e" >
			<h1>イベントハンドラ</h1>
			<a href="../../index.html" data-icon="back" data-ajax="false"
				data-direction="reverse" data-iconpos="notext"></a>
			<a href="../../index.html" data-icon="home"  data-ajax="false"
				data-transition="none" data-iconpos="notext"></a>
		</div>
		<div data-role="content" >
			<div class="left-nav">
				<div data-dp-template="../../title.html" ></div>
				<hr/>
				<div data-dp-template="navi.html"></div>
			</div>

			<div class="right-nav" >
<h2>イベントハンドラ</h2>
<p>
jQuery Mobile のイベントを簡便にハンドリングするAPIである。
</p>
<p>
幾つかの <a href="../../docs/concept/scope.html">スコープ インスタンス</a> のプロパティ名はイベントハンドラの為に予約される。

<table border=1 cellspacing=0 >
<tr><th><nobr>プロパティ名</nobr></th><th>イベント</th></tr>
<tr><td>onPageInit</td><td>ページの初期化</td></tr>
<tr><td>onBeforeShow</td><td>ページ表示前</td></tr>
<tr><td>onShow</td><td>ページ表示</td></tr>
<tr><td>onBeforeHide</td><td>ページ非表示前</td></tr>
<tr><td>onHide</td><td>ページ非表示</td></tr>
</table>
<br />
これらの名前のプロパティが存在する場合、各々のイベントのタイミングで関数として呼び出される。
引数は元のイベントとそのスコープ要素の jQuery Object である。
</p>

<p>
デフォルトの置換属性の処理は onBeforeShow の直後に行われる。
つまりスコープに操作を加えるならばこのイベントハンドラで行うべきである。
</p>

使用例：
<pre>
&lt;script>
  function PageDriver($this) {
    this.$this = $this;
  }
  PageDriver.prototype.<b>onPageInit</b> = function(ev,$this) {
    alert("page init");
  }
  PageDriver.prototype.<b>onBeforeShow</b> = function(ev,$this) {
    alert("before show");
  }
  PageDriver.prototype.<b>onShow</b> = function(ev,$this) {
    alert("show");
  }
  PageDriver.prototype.<b>onBeforeHide</b> = function(ev,$this) {
    alert("before hide");
  }
  PageDriver.prototype.<b>onHide</b> = function(ev,$this) {
    alert("hide");
  }
&lt;/script>

&lt;div data-role="page" data-dp-scope="(new PageDriver($this))">
&lt;/div>
	
</pre>
			</div>
		</div>
		<div data-role="footer" data-position="fixed" data-dp-template="../../footer.html"></div>
	</div>
	
	
	
	
	
</body>

</html>
